<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import type { Ref } from 'vue'
import { ref, watchEffect } from 'vue'
import type { SiderNavRaw, SiderNavTypes } from '@/types/global'
// ts定义props
const props = defineProps<{
  data: SiderNavRaw
}>()
const activeCode: Ref<string> = ref('')
const route = useRoute()
const router = useRouter()

watchEffect(()=>{
  console.log(route.params.code)
  activeCode.value = route.params.code ? route.params.code as string : props.data[0].code
})


function handlerOpen(sider: SiderNavTypes){

  router.push({
    path:`/`+sider.code,
  })

}
</script>
<template>
  <ul class="sider-list">
    <li
      v-for="sider in props.data"
      :key="sider.id"
      :class="{ 'sider-list-item': true, active: sider.code === activeCode }"
      @click="handlerOpen(sider)"
    >
     <span> {{ sider.label }}</span>
    </li>
  </ul>
</template>
<style lang="scss" scoped>
.sider-list {
  list-style: none;
  padding: 0;
  li.sider-list-item {
    margin-bottom: 10px;
    line-height: 2;
    cursor: pointer;
    a {
      text-decoration: none;
      color: #333;
    }

    &:hover {
      a {
        color: #409eff;
      }
    }

    &.active {
      color: #409eff;
  }
  }

}
</style>
